<template>
  <div class="info-form">
    <el-form label-width="100px" :model="user" ref="userRef" :rules="userInfoRules">

      <el-form-item label="用户名" prop="username">
        <el-input v-model="user.username" v-bind:placeholder="user.username"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="user.gender">
          <el-radio label="1">男</el-radio>
          <el-radio label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input type="age" v-model.number="user.age" v-bind:placeholder="user.age"></el-input>
      </el-form-item>

      <el-form-item label="手机号码" prop="phone">
        <el-input type="age" v-model.number="user.phone" v-bind:placeholder="user.phone"></el-input>
      </el-form-item>

       <el-form-item>
        <el-button type="primary" @click="submitForm('userRef')">立即修改</el-button>
        <el-button @click="resetForm('userRef')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      };
      return {
        user: {
          username: 'user',
          gender: '',
          age: 10,
          phone: '13435248613'
        },
        userInfoRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 4, max: 10, message: '长度在 4 到 10 个字符', trigger: 'blur' }
          ],
          gender: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          age: [
            { required: true, message: '年龄不能为空'},
            // { type: 'number', message: '年龄必须为数字值'}
          ],
          phone: [
            {validator: checkPhone, trigger: 'blur'}
          ]
        }
      };
    },
    mounted() {

      const user = window.sessionStorage.getItem("user");
      
      if(user){
          
          this.user = this.$qs.parse(user);
      }else{

        this.$router.push({path:'/login'})
      }
    },
    methods: {
       submitForm(formName) {
        this.$refs[formName].validate(async valid => {
          if (valid) {
            
            const {data:res} = await this.$http.post('/user/updateInfo',this.user);

            if(res.code == 200){

              sessionStorage.setItem('user', this.$qs.stringify(this.user))
              
              this.$message({
                message: res.message,
                type: 'success'
              });

            }else{

                this.$message.error(res.message);
            }
            
          } else {
            this.$message.error("请正确填写信息");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$message('已重置');
      } 
    }
}
</script>

<style lang="less" scoped>
.info-form {
  width: 20%;
  margin: auto;
  position: relative;
  top: 100px;

}
</style>
